<template>
  <el-card class="role-card">
	  <el-date-picker
	    v-model="value2"
		style="margin-left: 70px;"
	    type="month"
	    placeholder="选择月"
	  		value-format="YYYY-MM"
	  		:disabledDate="check"
	  		:onClick="wage">
	  </el-date-picker>
	  
	  
	  
    <div class="home-box">
      <el-table
            :data="tableData"
            border
            style="width: 90%; margin: 20px auto;border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
            :header-cell-style="{
                'background': '#337ecc !important',
                'color': '#ffffff',
                'border': 'none !important'
              }">
          
      		<el-table-column prop="deptName" label="部门名称" ></el-table-column>
      		<el-table-column prop="scoreWage" label="评分绩效" width="130" />
      	  <el-table-column prop="pieceWage" label="计件绩效" width="130" ></el-table-column>
      	  <el-table-column prop="kpiWage" label="提成绩效" width="130"></el-table-column>
      	  <el-table-column prop="okrWage" label="OKR绩效" width="130"></el-table-column>
      	  <el-table-column prop="rewardWage" label="特殊绩效" width="130"/>
      	  <el-table-column prop="partTimeRewardWage" label="兼职绩效" width="130" />
      	  <el-table-column prop="total" label="总计" width="130" />
      	
      	
        </el-table>
    </div>
  </el-card>
</template>
<script setup>
import { ref, onMounted,watch ,onBeforeMount, reactive, getCurrentInstance} from "vue";
import eventBus from "@/utils/event-bus";
import { getDeptTree } from "@/api/report";

const showSearch = ref(true);
const tableData = ref([]);
const selection = ref([]);
const loading = ref(false);


onBeforeMount(() => {
    getDeptTreeA();
});

/**
 * 获取部门列表
 */
const getDeptTreeA = () => {
	let empId = JSON.parse(localStorage.getItem("userInfo")).id;
	var time = value2.value
	getDeptTree({time}).then((data) => {
	  tableData.value = data.data
	});
	
  // loading.value = false;
};



const now = new Date();
const year = now.getFullYear();
// 获取当前月份（注意：月份从0开始，所以需要加1）
const month = now.getMonth() == 0? 12:now.getMonth()+1;
// 格式化为 YYYY-MM 形式
const yearMonth = `${year}-${month < 10 ? '0' : ''}${month}`;

var value2 = ref(yearMonth);


watch(value2, (newValue, oldValue) => {
	getDeptTreeA();
}, { deep: true });

const check = (time)=>{
	
	 return time.getTime() > new Date(new Date().toLocaleDateString()).getTime();

}

</script>

<style lang="scss" scoped>
.home-box {
  .header {
    margin-bottom: 22px;
    text-align: right;
  }

  ::v-deep .el-tag {
    margin-right: 6px;
  }

  ::v-deep .avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}
.el-card {
  border-radius: 10px;
}

.demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>
